<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-paginator.js"></script>
<body >
<div id="box">
    <div id="head">
            <div class="row">
                <div class="col-lg-5">
                    <div class="input-group">
                        <input type="text" id="key" placeholder="请输入书名" class="form-control">
                        <span class="input-group-btn">

                            <input class="btn btn-default" onclick="show()" id="enter" type="submit" value="检索"/>
                        </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
                <select id="dataSource">
                    <option value="biquge5200">www.biquge5200.com</option>
                    <option value="biquge">www.biquge.com</option>
                </select>
                <button class="btn btn-default" data-toggle="modal" data-target="#myModal">查看已有书籍</button>

            </div><!-- /.row -->

    </div>
    <table id="tab" class="table" border="1" cellpadding="0" cellspacing="0">
        <thead >
            <tr>
                <th style="text-align: center">书名</th>
                <th style="text-align: center">作者</th>
            </tr>
        </thead>
        <tbody>
        <td colspan="2">
            <video class="dplayer-video dplayer-video-current" webkit-playsinline="" playsinline="" preload="metadata" src="blob:http://www.smqzj.com/fa5b355e-852c-4b25-ac00-8e32deca4bbd">
            </video>
        </td>
        </tbody>
    </table>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">查看书籍</h4>
                </div>
                <div class="modal-body">
                    <table id="model_tab" style="text-align: center;font-size: 15px" class="table" border="1" cellpadding="0" cellspacing="0">
                        <thead>
                        <tr>
                            <td>文件名称</td>
                            <td>大小</td>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
</body>
</html>